<template>
  <div class="container">

    <el-table :data="list" stripe style="width: 100%" border>
      <el-table-column align="center" width="60px" label="序号">
        <template slot-scope="{$index}">
          {{$index+1}}
        </template>
      </el-table-column>
      <el-table-column prop="user_name" align="center" label="员工账号">
        <template slot-scope="{row}">
          <el-input v-if="row.editing" v-model="row.user_name" size="small"></el-input>
          <span v-else>{{row.user_name}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="password" align="center" label="员工密码">
        <template slot-scope="{row}">
          <el-input v-if="row.editing" v-model="row.password" size="small"></el-input>
          <span v-else>{{row.password}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="prop" label="权限">
        <template slot-scope="{row}">
          <el-select v-model="row.auth" placeholder="" :disabled="!Boolean(row.editing)" size="small">
            <el-option v-for="item in [{label:'超级管理员',value:1},{label:'管理员',value:2},{label:'服务员',value:3}]" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="create_time" align="center" label="创建时间">
        <template slot-scope="{row}">
          {{dayjs(row.create_time).format('YYYY/MM/DD')}}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{row}">
          <el-button size="small" :type="row.editing ? 'success' :'primary'" @click="editMember(row)">{{row.editing ? '保存' :'编辑'}}</el-button>
          <!-- <el-button type="info" v-if="row.editing" size="small" @click="cancelEdit(row)">取消</el-button> -->
          <el-button size="small" type="danger" @click="deleteMember(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="add" @click="dialogVisible  = true">
      <i class="el-icon-plus"></i>
    </div>
    <el-dialog title="添加员工" :visible.sync="dialogVisible" width="40%">
      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <el-form-item label="用户名：" prop="userName">
          <el-input v-model="form.userName"></el-input>
        </el-form-item>
        <el-form-item label="密码：" prop="password">
          <el-input type="password" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item label="权限：" prop="auth">
          <el-select v-model="form.auth" placeholder="" size="small">
            <el-option v-for="item in [{label:'超级管理员',value:1},{label:'管理员',value:2},{label:'服务员',value:3}]" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addMember">确认添加</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from 'dayjs'
// dayjs().format('YYYY MM DD')
import { query } from '@/tools/mysql';
export default {
  name: 'Staff',
  data() {
    return {
      list: [],
      form: { auth: 3 },
      dialogVisible: false,
      rules: {
        userName: [
          { required: true, min: 1, max: 11, message: '请输入1-11位账号', trigger: 'blur' },
        ],
        password: [{ required: true, min: 1, max: 18, trigger: 'blur', message: '请输入密码' }],
        auth: [{ required: true }]
      }
    };
  },
  created() {
    this.getList()
  },
  mounted() {
  },
  methods: {
    dayjs,
    async getList() {
      let userList = await query('SELECT * from user');
      this.list = userList;
    },
    deleteMember(row) {
      this.$alert('确认删除吗？', '提示', {
        type: 'warning',
        showCancelButton: true
      }).then(async () => {
        console.log('ok');
        await query(`DELETE from user where user_name = "${row.user_name}"`);
        this.getList();
      }).catch(_ => { })
    },
    editMember(info) {
      if (info.editing) {
        this.$set(info, 'editing', false);
      } else {
        this.$set(info, 'editing', true)
      }
    },
    handleClose() { },
    async addMember() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          let { userName, password, auth } = this.form
          await query(`INSERT INTO \`user\`(user_name,password,auth) VALUES(${userName},${password},${Number(auth)})`);
          this.$message.success('添加成功');
          this.dialogVisible = false;
          this.getList();
        } else {
          return false
        }
      })

    }

  },
};
</script>

<style scoped lang="scss">
.container {
  padding: 16px;
  height: 100%;
  .add {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: rgb(17, 136, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #fff;
  }
}
</style>
